<template>
  <div>
    送你一朵
    <!-- 
        所谓动态style，就是绑定style这个属性，跟前米的属性绑定是一样的 
        绑定之后，style要写字符串,
        动态绑定之后，里面就可以使用动态属性background
    -->
    <span :style="`background:${background};font-size:26px;color:'#fff'`"
      >❀</span
    >
    <button @click="toggoleFlowerColor('red')">我要红花</button>
    <button @click="toggoleFlowerColor('yellow')">我要黄花</button>
  </div>
</template>
<script>
export default {
  // 定义属性
  data() {
    return {
      background: "red",
    };
  },
  methods: {
    toggoleFlowerColor(color) {
      this.background = color;
    },
  },
};
</script>
